<template>
    <div>
        <el-card v-loading="loading">
            <template #header>
                <div>添加用户</div>
            </template>
            <el-form ref="addform" :rules="rules" :model="form" label-width="100px" label-position="left">
                <el-form-item label="用户名" prop="username">
                    <el-input v-model="form.username"></el-input>
                </el-form-item>
                <!-- <el-form-item label="头像">
                    <input type="file" accept="image/*" @change='showImgToView("EmployeePicture")'>
                </el-form-item> -->
                <el-form-item label="密码" prop="password">
                    <el-input type="password" v-model="form.password"></el-input>
                </el-form-item>
                <el-form-item label="确认密码" prop="cpassword">
                    <el-input type="password" v-model="form.cpassword"></el-input>
                </el-form-item>
                <el-form-item label="邮箱" prop="email">
                    <el-input v-model="form.email"></el-input>
                </el-form-item>
                <el-form-item label="手机" prop="phone">
                    <el-input v-model="form.phone"></el-input>
                </el-form-item>
                <el-form-item label="性别">
                    <el-radio-group v-model="form.gender">
                        <el-radio label="1">男</el-radio>
                        <el-radio label="0">女</el-radio>
                    </el-radio-group>
                </el-form-item>
                <el-form-item>
                    <el-button type="primary" @click="addloading">保存</el-button>
                    <el-button @click="$router.push({ name: 'UsersIndex' })">取消</el-button>
                </el-form-item>
            </el-form>
        </el-card>
    </div>
</template>

<script>
import { mapActions } from "vuex";
export default {
    data() {
        return {
            loading: false,
            form: {
                gender: "1",
            },
            rules: {
                username: [
                    { required: true, message: "用户名不能为空" },
                    {
                        validator: (rule, value, cb) => {
                            if (/^.{2,18}$/.test(value)) {
                                cb();
                            } else {
                                cb(new Error("用户名必须2-18个字符"));
                            }
                        },
                    },
                    {
                        validator: async (rule, value, cb) => {
                            const { data } = await this.exist({
                                field: "username",
                                value,
                            });
                            if (data) {
                                cb(new Error("用户名重复"));
                            } else {
                                cb();
                            }
                        },
                        trigger: "blur",
                    },
                ],
                password: [
                    { required: true, message: "密码不能为空" },
                    { min: 6, max: 18, message: "长度在 6 到 18 个字符" },
                ],
                cpassword: [
                    {
                        validator: (rule, value, cb) => {
                            if (this.form.password == value) {
                                cb();
                            } else {
                                cb(new Error("两次密码必须一致"));
                            }
                        },
                    },
                ],
                email: [
                    {
                        validator: (rule, value, cb) => {
                            if (
                                /^[A-Za-z0-9\u4e00-\u9fa5]+@[a-zA-Z0-9_-]+(\.[a-zA-Z0-9_-]+)+$/.test(
                                    value
                                )
                            ) {
                                cb();
                            } else {
                                cb(new Error("请输入正确的邮箱格式"));
                            }
                        },
                    },
                    {
                        validator: async (rule, value, cb) => {
                            const { data } = await this.exist({
                                field: "email",
                                value,
                            });
                            if (data) {
                                cb(new Error("邮箱重复"));
                            } else {
                                cb();
                            }
                        },
                        trigger: "blur",
                    },
                ],
                phone: [
                    {
                        validator: (rule, value, cb) => {
                            if (/^(?:(?:\+|00)86)?1[3-9]\d{9}$/.test(value)) {
                                cb();
                            } else {
                                cb(new Error("手机号格式不正确"));
                            }
                        },
                    },
                    {
                        validator: async (rule, value, cb) => {
                            const { data } = await this.exist({
                                field: "phone",
                                value,
                            });
                            if (data) {
                                cb(new Error("手机号重复"));
                            } else {
                                cb();
                            }
                        },
                        trigger: "blur",
                    },
                ],
            },
        };
    },
    methods: {
        ...mapActions("users", ["addUser", "exist"]),
        showImgToView() { },
        addloading() {
            this.$refs.addform.validate(async (valid) => {
                this.loading = true;
                if (valid) {
                    try {
                        await this.addUser({
                            username: this.form.username,
                            password: this.form.password,
                            email: this.form.email,
                            gender: this.form.gender,
                            phone: this.form.phone,
                        });
                        this.$message.success("添加成功");
                        this.$router.push({ name: "UsersIndex" });
                    } catch (error) { }
                }
                this.loading = false;
            });
        },
    },
};
</script>
  